<template>
    <div>
        <HETTable ref="syslogTable"
            :pageSize="10" 
            :tableFields="syslogTableFields" 
            :tableData="syslogTableData"
            :enableSearch="false"
            :tableCheckbox="true"
            :headerOperation="headerOperation"
            :handleSelectionChange="handleSelectionChange" 
            :total="syslogTotal"
            @getTableData="getSyslogTableData"></HETTable>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加转发设置" width="500" :center="true" :close-on-click-modal="false">
        <el-form ref="syslogForm" :model="form" class="px-10" 
            :rules="rules">
            <el-form-item label="IP" :label-width="labelWidth" prop="ip">
                <el-input class="input-width" v-model="form.ip" autocomplete="off" />
            </el-form-item>
            <el-form-item label="端口" :label-width="labelWidth" prop="port">
                <el-input class="input-width" v-model="form.port" autocomplete="off" />
            </el-form-item>
            <el-form-item label="类型" :label-width="labelWidth">
                <el-select v-model="form.forwardType"  class="input-width">
                    <el-option label="不转发" value="3" />
                    <el-option label="转发工业卫士日志" value="0" />
<!--                    <el-option label="只转发安全设备日志" value="1" />-->
<!--                    <el-option label="转发工业卫士和安全设备日志" value="2" />-->
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="querySyslog">
            确认
            </el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, markRaw, toRaw } from 'vue'
import { ElMessage } from 'element-plus'
import HETTable from '~/components/common/HETTable.vue'
import { req_getAllSyslogForward, req_setAddSyslogForward, req_updateSyslogForward, req_deleteSyslogForward } from '~/utils/axios/setting.js'
import { Refresh, Delete, Edit, Plus } from '@element-plus/icons-vue'
import {validIp, validPort} from '~/utils/common/validation.js'
// syslog日志label宽度
const labelWidth = '60px';
// syslog 表单
const syslogForm = ref()
// syslog日志table
const syslogTable = ref();
// syslog日志 table 数据总条数
let syslogTotal = ref(0)
// syslog日志 table 数据
let syslogTableData = ref([])
// 表格多选框是否有被选中
let handleSelectionChangeFlag = ref(true)
// 表格多选框是否有被选中，修改的标识
let handleSelectionChangeEditFlag = ref(true)
// 表格多选框被选中的值
let handleSelectionChangeValue = ref(null)
// syslog日志表格 列名与数据源设置
const syslogTableFields = [
    { name: "ip", label: "IP" },
    { name: "port", label: "端口" },
    { name: "forwardType", label: "转发类型" }
];
// 类型数组
const forwardTypeArr = ['只转发工业卫士日志','不转发']
// syslog日志的数据请求
async function getSyslogTableData(countParams, searchParams) {
    // updateTime
    // 3 不转发
    // 0 只转发工业卫士日志
    // 1 只转发安全设备日志
    // 2 转发工业卫士和安全设备日志
    delete searchParams.$orderby
    let syslogData = await req_getAllSyslogForward(searchParams)
    syslogTableData.value = syslogData.data.map( item => {
        return {
            ...item,
            forwardType:forwardTypeArr[item.forwardType]
        }
    } )
    syslogTotal.value = syslogData.data.length
    syslogTable.value.finish();
}
// 已安装设备表格中用户选择复选框时的函数
const handleSelectionChange = (val) => {
    handleSelectionChangeValue.value = val;
    if(val.length === 1){
        handleSelectionChangeEditFlag.value = false;
    }else{
        handleSelectionChangeEditFlag.value = true;
    }
    if (val.length >= 1) {
        handleSelectionChangeFlag.value = false;
    } else {
        handleSelectionChangeFlag.value = true;
    }
}
// 新增弹出框变量
let dialogFormVisible = ref(false)
// 新增弹出框中from表单数据
let form = reactive({
    'ip':'',
    'port':'514',
    'forwardType':''
})
let rules = reactive({
    ip: [
      { required: true, message: "请输入正确的IP", trigger: "blur" },
      { validator: validIp, trigger: "blur" },
    ],
    port: [
      { required: true, message: "请输入正确的端口", trigger: "blur" },
      { validator: validPort, trigger: "blur" },
    ],
})
const handleAddSyslog = () => {
    dialogFormVisible.value = true;
    form.ip = '';
    form.port = '';
}
const querySyslog = async () => {
    if (!syslogForm) return
    await syslogForm.value.validate((valid, fields) => {
        if (valid) {
            if(!handleSelectionChangeEditFlag.value){
                form.id = handleSelectionChangeValue.value[0].id;
                req_updateSyslogForward(toRaw(form)).then( res => {
                    syslogTable.value.getTableData()
                    dialogFormVisible.value = false;
                },err => {
                    ElMessage.error(err)
                })
            }else{
                req_setAddSyslogForward(toRaw(form)).then( res => {
                    syslogTable.value.getTableData()
                    delete form.id;
                    dialogFormVisible.value = false;
                },err => {
                    ElMessage.error(err)
                })
            }
            
        }
    })
}
const handleUpdateSyslog = () => {
    dialogFormVisible.value = true;
    form.ip = handleSelectionChangeValue.value[0].ip;
    form.port = handleSelectionChangeValue.value[0].port;
}
const deleteSyslog = () => {
    let idArr = [];
    handleSelectionChangeValue.value.map( item => {
        idArr.push(item.id)
    })
    req_deleteSyslogForward(idArr).then( res => {
        syslogTable.value.getTableData()
        dialogFormVisible.value = false;
    },err => {
        ElMessage.error(err)
    })
}

const headerOperation = [
    { name: '新增', ev: handleAddSyslog, icon: Plus },
    { name: '修改', ev: handleUpdateSyslog, icon: Edit, disabled: handleSelectionChangeEditFlag },
    { name: '删除', ev: deleteSyslog, icon: Delete, disabled: handleSelectionChangeFlag, confirm:{
        text: '删除后将无法还原，确定要删除？',
        title: '删除转发设置',
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        icon:markRaw(Delete)
    } },
]

</script>

<style lang="scss" scoped></style>